<template>
  <div>
    <el-table
      id="examine-table"
      v-loading="loading"
      row-key="examineId"
      :data="list"
      :height="tableHeight"
      :class="WKConfig.tableStyle.class"
      :stripe="WKConfig.tableStyle.stripe"
      class="main-table"
      :tree-props="{children: 'childList'}"
      highlight-current-row
      style="width: 100%;">
      <el-table-column
        v-for="(item, index) in fieldList"
        :align="index===0?'':'center'"
        :key="index"
        :formatter="fieldFormatter"
        :prop="item.prop"
        :min-width="item.width"
        :label="item.label"
        show-overflow-tooltip />
      <el-table-column fixed="right" label="操作" width="250" align="center">
        <template slot-scope="scope">
          <template v-if="scope.row.isGroup">
            <el-button
              v-if="scope.row.groupId"
              type="primary-text"
              style="padding: 0;"
              @click="handleClick('edit-group', scope)">编辑</el-button>
            <el-button
              v-if="!scope.row.childList.length"
              type="primary-text"
              style="padding: 0;"
              @click="handleClick('delete-group', scope)">删除</el-button>
          </template>
          <template v-else>
            <el-button
              type="primary-text"
              style="padding: 0;"
              @click="handleClick('edit-table', scope)">编辑表单</el-button>
            <el-button
              type="primary-text"
              style="padding: 0;"
              @click="handleClick('edit', scope)">编辑</el-button>
            <el-button
              :disabled="scope.row.isSys === 1"
              type="primary-text"
              style="padding: 0;"
              @click="handleClick('delete', scope)">删除</el-button>
            <el-button
              type="primary-text"
              style="padding: 0;"
              @click="handleClick('change', scope)">{{ scope.row['status'] === 2 ? '启用' : '停用' }}</el-button>
          </template>
        </template>
      </el-table-column>
    </el-table>
    <oa-approve-flow-create
      v-if="createShow"
      :detail="rowDetail"
      @success="saveSuccess"
      @close="createShow = false"
    />
  </div>
</template>

<script>
import {
  examinesUpdateStatusAPI
} from '@/api/examine'
import {
  examineSuperExaminesQueryExamineGroupAPI,
  examineSuperExaminesDelExamineGroupAPI
} from '@/api/examine/superExamine'

import OaApproveFlowCreate from './Create'

export default {
  name: 'ExamineManager',
  components: {
    OaApproveFlowCreate
  },
  data() {
    return {
      loading: false, // 加载动画
      tableHeight: document.documentElement.clientHeight - 210, // 表的高度
      list: [],
      fieldList: [
        {
          prop: 'examineName',
          label: '审批流名称',
          width: 150
        },
        {
          prop: 'userList',
          label: '发起人范围',
          width: 150
        },
        {
          prop: 'advancedConfigVO',
          label: '审批被拒后重新提交/审批',
          width: 150
        },
        {
          prop: 'remarks',
          label: '审批类型说明',
          width: 150
        },
        {
          prop: 'updateTime',
          label: '最后修改时间',
          width: 150
        },
        {
          prop: 'status',
          label: '状态',
          width: 150
        }
      ],
      rowDetail: null,
      createShow: false // 审批类型操作
    }
  },
  watch: {},
  mounted() {
    window.onresize = () => {
      this.tableHeight = document.documentElement.clientHeight - 210
    }

    this.getList()
  },
  methods: {
    /**
     * @description: 新建成功
     * @return {*}
     */
    saveSuccess() {
      this.getList()
    },

    /**
     * @description: 获取列表数据
     * @param {*} searchStr
     * @return {*}
     */
    getList(searchStr) {
      this.loading = true
      examineSuperExaminesQueryExamineGroupAPI({
        groupType: 0, // oa
        search: searchStr
      })
        .then(res => {
          this.list = this.dataFormatter(res.data)
          this.loading = false
        })
        .catch(() => {
          this.loading = false
        })
    },

    /**
     * @description: 格式获取的数据
     * @param {*} dataList
     * @return {*}
     */
    dataFormatter(dataList) {
      return dataList.map((item, index) => {
        item.examineName = item.groupName
        item.childList = item.examineVOList || []
        item.isGroup = true
        item.examineId = index + 1
        item.status = ''
        return item
      })
    },

    /**
     * @description: 格式化展示数据
     * @param {*} row
     * @param {*} column
     * @return {*}
     */
    fieldFormatter(row, column) {
      // 如果需要格式化
      if (column.property === 'examineName') {
        if (row.isGroup) {
          return row.examineName
        }
        return (
          <span>
            <span class='table-icon'
              style={{ backgroundColor: row.iconColor }}>
              <i class={row.iconClass} />
            </span>
            <span style='margin-left:10px'>{row.examineName}</span>
          </span>
        )
      } else if (column.property === 'userList') {
        const structures = row['deptList'] || []
        let strName = structures
          .map(item => {
            return item.name
          })
          .join('、')

        const users = row['userList'] || []
        const userName = users
          .map(item => {
            return item.realname
          })
          .join('、')

        if (strName && userName) {
          strName += '、'
        }
        const name = strName + userName
        if (row.isGroup) {
          return ''
        }
        return name || '全公司'
      } else if (column.property === 'status') {
        // status    1 正常 2 停用 3 删除
        if (row[column.property] === 2) {
          return '停用'
        } else if (row[column.property] === '') {
          return ''
        }
        return '启用'
      } else if (column.property === 'advancedConfigVO') {
        if (row.hasOwnProperty('childList')) return ''

        return {
          2: '从拒绝时指定节点依次处理' // 返回审批流初始层级
        }[row[column.property].rejectHandleType]
      }
      return row[column.property]
    },

    /**
     * @description: 添加审批流
     * @return {*}
     */
    addExamine() {
      this.rowDetail = null
      this.createShow = true
    },

    /**
     * @description: 行操作
     * @param {*} type
     * @param {*} scope
     * @return {*}
     */
    handleClick(type, scope) {
      if (type === 'edit-table') {
        this.$router.push({
          name: 'workbenchHandlefield',
          params: {
            type: 'oa_examine',
            label: '10',
            id: scope.row.examineId
          }
        })
      } else if (type === 'edit') {
        this.rowDetail = scope.row
        this.createShow = true
      } else if (type === 'delete') {
        // 启用停用
        this.$confirm('您确定要删除该审批流?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
          .then(() => {
            this.loading = true
            examinesUpdateStatusAPI({
              examineId: scope.row['examineId'],
              status: 3
            })
              .then(res => {
                this.list.splice(scope.$index, 1)
                this.getList()

                this.$message({
                  type: 'success',
                  message: '操作成功'
                })
                this.loading = false
              })
              .catch(() => {
                this.loading = false
              })
          })
          .catch(() => {})
      } else if (type === 'change') {
        // 启用停用
        this.$confirm(
          '您确定要' +
            (scope.row['status'] === 2 ? '启用' : '停用') +
            '该审批流?',
          '提示',
          {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }
        )
          .then(() => {
            examinesUpdateStatusAPI({
              examineId: scope.row['examineId'],
              status: scope.row['status'] === 2 ? 1 : 2
            })
              .then(res => {
                this.$message({
                  type: 'success',
                  message: '操作成功'
                })
                this.getList()
              })
              .catch(() => {})
          })
          .catch(() => {})
      } else if (type === 'delete-group') {
        this.$confirm('您确定要删除分组?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
          .then(() => {
            this.loading = true
            examineSuperExaminesDelExamineGroupAPI([scope.row['groupId']]).then(res => {
              this.list.splice(scope.$index, 1)
              this.getList()
              this.$message({
                type: 'success',
                message: '操作成功'
              })
              this.loading = false
            })
              .catch(() => {
                this.loading = false
              })
          })
          .catch(() => {})
      } else if (type === 'edit-group') {
        this.$emit('editGroup', scope.row)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
@import "../../styles/index.scss";
@import "../../styles/table.scss";

.el-button--small {
  padding: 0;
}
</style>
